Component({
  properties: {
    // 是否显示动画
    showAnimation: {
      type: Boolean,
      value: false
    },
    // 动画持续时间(ms)
    animationDuration: {
      type: Number,
      value: 3000
    }
  },

  data: {
    // 内部动画状态
    animationComplete: false
  },

  observers: {
    'showAnimation': function(newVal) {
      if (newVal) {
        // 当显示动画时，设置动画完成状态为false
        this.setData({
          animationComplete: false
        })

        // 动画结束后触发回调
        setTimeout(() => {
          this.setData({
            animationComplete: true
          })
          // 触发动画完成事件
          this.triggerEvent('animationend')
        }, this.properties.animationDuration)
      }
    }
  },

  methods: {
    // 隐藏动画
    hideAnimation() {
      this.setData({
        showAnimation: false
      })
    }
  }
})